<template name="App_home">

  <!-- your html here -->

<br><br><br><br>
  <div class="carousel slide" data-ride="carousel" id="carousel-1">
                        <div class="carousel-inner" role="listbox">
                            <div class="item"><img style="width:100%" src="http://placeholdit.imgix.net/~text?txtsize=42&amp;txt=Carousel+Image&amp;w=1400&amp;h=600" alt="Slide Image"></div>
                            <div class="item"><img style="width:100%"  src="http://placeholdit.imgix.net/~text?txtsize=42&amp;txt=Carousel+Image&amp;w=1400&amp;h=600" alt="Slide Image"></div>
                            <div class="item active"><img  style="width:100%"  src="http://placeholdit.imgix.net/~text?txtsize=42&amp;txt=Carousel+Image&amp;w=1400&amp;h=600" alt="Slide Image"></div>
                        </div>
                        <div><a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-1" role="button"
                            data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i><span class="sr-only">Next</span></a></div>
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-1" data-slide-to="0"></li>
                            <li data-target="#carousel-1" data-slide-to="1"></li>
                            <li data-target="#carousel-1" data-slide-to="2" class="active"></li>
                        </ol>
                    </div>
        <div class="projects-clean">
        <div class="container">
            <div class="intro">
                <h2 class="text-center">热门产品 </h2>

            </div>
            <div class="row projects">
                <div class="col-lg-4 col-sm-6 item">
                <a href="/products/1">
                    <img class="img-responsive" src="/assets/img/desk.jpg">
                </a>
                <a href="/products/1"><h3 class="name">Project Name</h3></a>
                    <p class="description">Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu gravida. Aliquam varius finibus est, interdum justo suscipit id.</p>
                </div>
                <div class="col-lg-4 col-sm-6 item"><img class="img-responsive" src="/assets/img/building.jpg">
                    <h3 class="name">Project Name</h3>
                    <p class="description">Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu gravida. Aliquam varius finibus est, interdum justo suscipit id.</p>
                </div>
                <div class="col-lg-4 col-sm-6 item"><img class="img-responsive" src="/assets/img/loft.jpg">
                    <h3 class="name">Project Name</h3>
                    <p class="description">Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu gravida. Aliquam varius finibus est, interdum justo suscipit id.</p>
                </div>
                <div class="col-lg-4 col-sm-6 item"><img class="img-responsive" src="/assets/img/minibus.jpeg">
                    <h3 class="name">Project Name</h3>
                    <p class="description">Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu gravida. Aliquam varius finibus est, interdum justo suscipit id.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="highlight-clean">
        <div class="container">
            <div class="intro">
                <h2 class="text-center">Highlight</h2>
                <p class="text-center">Nunc luctus in metus eget fringilla. Aliquam sed justo ligula. Vestibulum nibh erat, pellentesque ut laoreet vitae. </p>
            </div>
            <div class="buttons"><a class="btn btn-primary" role="button" href="#">Primary</a>
                <button id="testCall" class="btn btn-default" type="button">Secondary</button>
            </div>
        </div>
    </div>
    <div class="highlight-phone">
        <div class="container">
            <div class="row">
                <div class="col-sm-8">
                    <div class="intro">
                        <h2>Highlight</h2>
                        <p>Nunc luctus in metus eget fringilla. Aliquam sed justo ligula. Vestibulum nibh erat, pellentesque ut laoreet vitae. Aliqua sed justo ligula.</p><a class="btn btn-primary" role="button" href="#">Action Button</a></div>
                </div>
                <div class="col-sm-4 hidden-xs">
                    <div class="iphone-mockup"><img src="assets/img/iphone.svg" class="device">
                        <div class="screen"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
